<template>
  <div class="app-container">
    <el-card>
      <template #header>控制记录</template>
      <el-form :inline="true" :model="query" size="small">
        <el-form-item label="设备ID">
          <el-input v-model.number="query.deviceId" placeholder="设备ID" style="width: 160px" />
        </el-form-item>
        <el-form-item label="设备编码">
          <el-input v-model="query.deviceCode" placeholder="设备编码" style="width: 180px" />
        </el-form-item>
        <el-form-item label="通道">
          <el-select v-model="query.channel" clearable style="width: 140px">
            <el-option label="MQTT" value="MQTT" />
            <el-option label="MODBUS" value="MODBUS" />
          </el-select>
        </el-form-item>
        <el-form-item label="动作">
          <el-select v-model="query.action" clearable style="width: 200px">
            <el-option label="mqtt-publish" value="mqtt-publish" />
            <el-option label="modbus-write-holding" value="modbus-write-holding" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="query.status" clearable style="width: 140px">
            <el-option label="SUCCESS" value="SUCCESS" />
            <el-option label="FAIL" value="FAIL" />
          </el-select>
        </el-form-item>
        <el-form-item label="起止时间">
          <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" style="width: 100%; margin-top: 10px" stripe>
        <el-table-column prop="createTime" label="时间" width="170" />
        <el-table-column prop="deviceId" label="设备ID" width="120" />
        <el-table-column prop="deviceCode" label="设备编码" width="160" />
        <el-table-column prop="channel" label="通道" width="100" />
        <el-table-column prop="action" label="动作" width="180" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status==='SUCCESS' ? 'success' : 'danger'">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="request" label="请求" />
        <el-table-column prop="response" label="响应" />
      </el-table>

      <div style="margin-top: 10px; text-align: right;">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          v-model:current-page="query.pageNum"
          v-model:page-size="query.pageSize"
          @size-change="fetchData"
          @current-change="fetchData"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import dayjs from 'dayjs'
import { controlRecords } from '@/api/iot'

const query = reactive({
  deviceId: undefined as number|undefined,
  deviceCode: '',
  channel: '',
  action: '',
  status: '',
  pageNum: 1,
  pageSize: 10
})

const timeRange = ref<string[] | null>(null)
const list = ref<any[]>([])
const total = ref(0)

async function fetchData() {
  const params: any = { ...query }
  if (timeRange.value && timeRange.value.length === 2) {
    params.beginTime = timeRange.value[0]
    params.endTime = timeRange.value[1]
  } else {
    delete params.beginTime
    delete params.endTime
  }
  const res = await controlRecords(params)
  const data = res?.data
  list.value = data?.records || []
  total.value = data?.total || 0
}

function reset() {
  query.deviceId = undefined
  query.deviceCode = ''
  query.channel = ''
  query.action = ''
  query.status = ''
  query.pageNum = 1
  query.pageSize = 10
  timeRange.value = null
  fetchData()
}

watch(() => [query.pageNum, query.pageSize], () => fetchData())

fetchData()
</script>

<style scoped>
</style> 